<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>PhoneBook (powered by YUI and Jayrock)</title>

    <!-- YUI Stylesheets -->
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.0/build/reset-fonts-grids/reset-fonts-grids.css" />
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.0/build/datatable/assets/datatable.css" />
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.0/build/menu/assets/menu.css" />
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.0/build/button/assets/button.css" />
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.0/build/tabview/assets/tabview.css" />
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.0/build/tabview/assets/border_tabs.css" />
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css">

    <!-- listerTable styles (required with DataTable) -->
    <style type="text/css">
        #listerTable {margin:1em;}
        #listerTable table {border-collapse:collapse;}
        #listerTable th, #listerTable td {border:1px solid #000;padding:.25em;}
        #listerTable th {background-color:#BEDAFF}
        #listerTable .yui-dt-odd {background-color:#eee;} /*light gray*/
        #listerTable em {font-style:italic;}
        #listerTable strong {font-weight:bold;}
        #listerTable .big {font-size:136%;}
        #listerTable .small {font-size:77%}
        #listerTable .yui-dt-selected {background-color:#000;color:#FFF;} /*white on black*/
        #listerTable .yui-dt-editable.yui-dt-highlight {background-color:#BEDAFF;} /*light blue*/
    </style>

</head>
<body>
    <div id="doc3">
        <div id="header">
            <div id="profileDiv">
                <p>Welcome</p>
            </div>
        </div>
        <div id="tabDiv" class="yui-navset">
            <ul class="yui-nav">
                <li class="selected"><a href="#listerDiv">Lister</a></li>
                <li><a href="#editorDiv">Editor</a></li>
            </ul>
            <div id="content" class="yui-content">
                <div id="listerDiv">
                    <div id="listerTable"></div>
                    <fieldset id="listerMenu"></fieldset>
                </div>
                <div id="editorDiv">
                    <form id="editorForm" name="editorForm" action="#" method="post">
                        <fieldset>
                            <legend>Editor</legend>
                            <table summary="Organize fields for editor form">
                                <tr>
                                  <th><label for="first_name">First Name</label></th>
                                  <td><input name="first_name" /></td>
                                  <td><div id="hint_for_first_name" /></td>
                                </tr>
                                <tr>
                                  <th><label for="last_name">Last Name</label></th>
                                  <td><input name="last_name" /></td>
                                  <td><div id="hint_for_last_name" /></td>
                                </tr>
                                <tr>
                                  <th><label for="extension">Extension</label></th>
                                  <td><input name="extension" /></td>
                                  <td><div id="hint_for_extension" /></td>
                                </tr>
                                <tr>
                                  <th><label for="user_name">User Name</label></th>
                                  <td><input name="user_name" /></td>
                                  <td><div id="hint_for_user_name" /></td>
                                </tr>
                                <tr>
                                  <th><label for="hired">Hired</label></th>
                                  <td><input id="hired" name="hired" /></td>
                                  <td><div id="hiredCalendar" /></td>
                                </tr>
                                <tr>
                                  <th><label for="hours">Hours</label></th>
                                  <td><input name="hours" /></td>
                                  <td><div id="hint_for_hours" /></td>
                                </tr>
                                <tr>
                                  <th><label for="editor">Editor</label></th>
                                  <td><input name="editor" /></td>
                                  <td><div id="hint_for_editor" /></td>
                                </tr>
                                <tr>
                                  <td colspan="2" align="right">
                                    <fieldset id="editorMenu"></fieldset>
                                    <input type="hidden" name="entry_key" id="entry_key" />
                                  </td>
                                </tr>
                            </table>
                        </fieldset>
                    </form>
                </div>
            </div>
         </div> <!-- /tabDiv -->
        <div id="footer">
            <hr />
            <div id="ANVIL.message"></div>
        </div>
    </div> <!-- /doc3 -->

    <!-- YUI DataTable/DataSource Dependencies -->
    <script src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script src="http://yui.yahooapis.com/2.2.0/build/element/element-beta-min.js"></script>
    <script src="http://yui.yahooapis.com/2.2.0/build/container/container-min.js"></script>
    <script src="http://yui.yahooapis.com/2.2.0/build/menu/menu-min.js"></script>

    <!-- OPTIONAL: Connection (enables XHR) -->
    <script src="http://yui.yahooapis.com/2.2.0/build/connection/connection-min.js"></script>

    <!-- OPTIONAL: Drag Drop (enables resizeable columns) -->
    <script src="http://yui.yahooapis.com/2.2.0/build/dragdrop/dragdrop-min.js"></script>

    <!-- Must be after other YUI dependencies -->
    <script src="http://yui.yahooapis.com/2.2.0/build/datasource/datasource-beta-min.js"></script>
    <script src="js/yazaar/patched/datatable-beta-patched.js"></script>
    <script src="js/yazaar/patched/button-beta-patched.js"></script>
    <script src="http://yui.yahooapis.com/2.2.0/build/tabview/tabview-min.js"></script>
    <script src="http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js"></script>

    <!-- Anvil/Jayrock Dependencies  -->
    <script src="js/jayrock/json.js"></script>
    <script src="PhoneBook.ashx?proxy&amp;v=2"></script>
    <script src="js/yazaar/extras/crockford/remedial.js"></script>
    <script src="js/anvil/anvil.js"></script>
    <script src="js/anvil/anvil-yui.js"></script>

    <!-- PhoneBook "widgets" -->
    <script src="PhoneBook-Menu.js"></script>
    <script src="PhoneBook-Lister.js"></script>
    <script src="PhoneBook-Editor.js"></script>
    <script src="PhoneBook.js"></script>
</body>
</html>
